<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	<script type="text/javascript" src="30days.js"></script>
	<title>day 13 - Full control with animate</title>
	
	<style>
		.box {
			width: 800px;
			background: red;
			padding: 2em;
			position: relative;
		}
	</style>
	
</head>

<body>

	<h1>day 13 - full control with animate</h1>
	<div class=box>
		<h2>some content here</h2>
		<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p>
		<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p>	
	</div>
	<p><button>increase</button></p>
	
	<script type="text/javascript">
	
		// avoid global use, using this self invoking function
		(function () {
			
			var box = $('div.box').css('font-size',12);
			
			fontSize = parseInt(box.css('font-size'),10);
			
			$('button').on('click', function() {
				//box.css('font-size',fontSize += 5);
				
				// new way to increase font
				//box.css('font-size','+=1');
				
				// pass an obj to the css method
				box.css({
					'color': 'white'
				});
				
				box.animate({
					'font-size':'+=1',
					'width': '+=300'
				}, 3000, 'swing', function() { // time, easing, callback function
					console.log('completed');
				});
			});
		})();
		
	</script>
	
</body>





</html>